<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import WidgetBase from './WidgetBase.vue'

  export default {
    name: 'w-video',
    mixins: [WidgetBase],
    props: ['src', 'poster'],
    data() {
      return {
        playing: false,
      }
    },
    methods: {
      getMimeType() {
        let filePath = $.strTo(this.x.src, '?') || this.x.src
        let fileName = $.strFrom(filePath, '/', true) || filePath
        let suffix = $.strFrom(fileName, '.', true)
        return suffix ? mimeType(fileName) : 'video/mp4'
      },
      html_slots() {
        return [h('video', {
          class: 'w-video-vd f-width f-height',
          ref: 'vd',
          src: this.x.src,
          poster: this.x.poster,
          onplay: e => this.playing = true,
          onpause: e => this.playing = false,
          controls: true,
          'webkit-playsinline': true,
          'playsinline': true,
          'x-webkit-airplay': true,
          'x5-playsinline': true,
          'x5-video-player-type': 'h5',
          'x5-video-orientation': 'h5',
          'x5-video-player-fullscreen': true,
        }), h('div', {
          class: 'w-video-play f-abs-center f-flex-center',
          innerHTML: '<i class="f-i f-i-play"></i>',
          onclick: e => {
            let o = this.$refs.vd
            o.paused ? o.play() : o.pause()
          }
        })]
      }
    },
    computed: {
      html_class() {
        return ['f-rel f-flex-center', {'z-play': this.playing}]
      }
    }

  }
</script>

<style>
  .w-video {
    box-sizing: border-box;
    background: #000;
  }

  .w-video.z-play .w-video-play {
    display: none
  }

  .w-video-play {
    display: flex;
    width: 62px;
    height: 62px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    z-index: 1;
  }

  .w-video-play .f-i {
    color: #fff;
    font-size: 36px;
    transform: translate(4px, 0px);
    cursor: default
  }
</style>
